{% extends "registration/base.html" %}

{% load i18n %}
{% block content %}
<style type="text/less">
html{font-size: 10px;}
body { background-color: #f7f7f7;}
.flex_center{display: flex; justify-content: center; align-items: center;}
header{.flex_center; width:37.5rem;height:4rem; background-color: #FFF; font-size:1.8rem; font-weight: bold;}
.block_content_logo{
    .flex_center;
    background-color: #FFF;
    height: 23rem;
    .left { width: 12.7rem; height: 12.7rem; .flex_center; }
    .center { width:  2.6rem; height: 2.6rem; .flex_center; }
    .right { width: 12.7rem; height: 12.7rem; .flex_center; }
    img {width: 100%;}
    .left img, .right img{width: 8.7rem; height: 8.7rem;}
}
.block_content{
    padding: 3rem 3.5rem 0 3.5rem;
    h2{width:30.5rem;height:2.5rem;font-size:1.6rem;font-family:PingFangSC-Bold,PingFang SC;font-weight:bold;color:rgba(51,51,51,1);line-height:2rem;}
    ul{color: #666; list-style: none;}
    ul li{display: flex; align-items: center; font-size: 1.2rem; height: 2.5rem; line-height: 2.5rem;}
    ul img {width: 1.4rem; height: 1.4rem; margin-right: 1rem;}
    .btn_submit{width:30.5rem;height:4.4rem;background:rgba(0,185,255,1);box-shadow:0rem 0.3rem 0.4rem 0rem rgba(0,185,255,0.5);
        border-radius:2.2rem;font-size:1.8rem;color: #FFF;text-align: center; margin-top: 6rem;}
}
</style>
<script src="https://cdn.bootcss.com/less.js/3.10.3/less.min.js"></script>
    <div class="block-center">
        <header>yourhost</header>
        <div class="block_content_logo">
            <div class="left"><img src="/static/images/accounts/authorize_logo1.png"></div>
            <div class="center"><img src="/static/images/accounts/authorize_switch.png"></div>
            <div class="right"><img src="/static/images/accounts/authorize_logo2.png"></div>
        </div>
        <div class="block_content">
            <h2>登录后该应用将获取以下权限</h2>
            <ul>
                <li><img src="/static/images/accounts/authorize_checked.png"/>  应用账号与「yourhost」账号互通</li>
                <li><img src="/static/images/accounts/authorize_checked.png"/>  APP内付费购买内容，可在「yourhost」APP内收听</li>
            </ul>
            <form id="authorizationForm" method="post">
                {% csrf_token %}
                {% for field in form %}
                    {% if field.is_hidden %}
                        {{ field }}
                    {% endif %}
                {% endfor %}
                <input type="submit" class="btn_submit" name="allow" value="授权"/>
            </form>
        </div>



    </div>
{% endblock %}